<template>
  <div class="shop_index">
    <tabar/>
    <item_bar/>

    <div class="shop_index_nav_box">
      <div class="shop_index_nav">
        <div class="shop_index_nav_logo">
          <router-link :to="{path:'items',query:{id:1}}">
            <img src="@/assets/images/shop/test_logo.png">
          </router-link>
        </div>
        <div class="shop_index_nav_adv">
          <div class="shop_index_nav_adv_item">
            <router-link :to="{path:'items',query:{id:1}}">
              <img src="@/assets/images/shop/test_items_01.png">
            </router-link>
          </div>
          <div class="shop_index_nav_adv_item">
            <router-link :to="{path:'items',query:{id:1}}">
              <img src="@/assets/images/shop/test_items_01.png">
            </router-link>
          </div>
          <div class="shop_index_nav_adv_item">
            <router-link :to="{path:'items',query:{id:1}}">
              <img src="@/assets/images/shop/test_items_01.png">
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="shop_index_nav_item">
      <ul>
        <li >
          <router-link to="/shop/classifction">全部分类商品</router-link>
        </li>
      </ul>
    </div>
    <div class="shop_index_carousel">
      <el-carousel indicator-position="outside" height="700px">
        <el-carousel-item v-for="item in 4" :key="item">
          <router-link to="/items?id=1">
            <img :src="test_carousel_img"/>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="shop_index_box" v-for="data in 3">
      <div class="shop_index_box_title">
        新品专区
      </div>
      <div class="shop_index_box_content">
        <div class="shop_index_box_content_item" v-for="data in 10">
          <div class="shop_index_box_content_item_name">
            <div class="shop_index_box_content_item_title"><span>HUAWEI P50</span></div>
            <div class="shop_index_box_content_item_mini_title"><span>原色双摄影单元</span></div>
          </div>
          <div class="shop_index_box_content_item_img">
            <div class="shop_index_box_content_item_img_btns">
              <div class="shop_index_box_content_item_img_btns_item">
                2399.00
              </div>
              <div class="shop_index_box_content_item_img_btns_item item_important">
                <router-link :to="{path:'/items',query:{id:1}}">
                  查看详情
                </router-link>
              </div>
            </div>
            <div class="shop_index_box_content_item_img_box">
              <img src="@/assets/images/shop/test_items.png"/>
            </div>
          </div>
        </div>
      </div>
      <div class="shop_index_box_more"><router-link to="/">更多商品专区 <i class="el-icon-caret-right"></i> </router-link> </div>
    </div>
    <bottom />
  </div>
</template>

<script>
import tabar from '@/components/topbar.vue'
import bottom from '@/components/bottom.vue'
import item_bar from '@/components/shop_items/shop_items_topbar.vue'

export default {
  data() {
    return {
      id:'',
      test_carousel_img: 'https://gdp.alicdn.com/imgextra/i2/2838892713/O1CN01vLZV7f1VubGuc4UXP_!!2838892713.jpg'
    }
  },
  created() {
    this.id = this.$route.query.id
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  },
  watch: {
    $route() {
      this.id = this.$route.query.id
    },
  },
  components: {
    tabar,
    item_bar,
    bottom
  }
}
</script>

<style scoped>
.shop_index_box_more a{
  line-height: 40px;
  color: #ffffff;
}
.shop_index_box_more {
  width: 300px;
  height: 40px;
  margin: 20px auto;
  text-align: center;
  background-color: #442f1a;
  border-radius: 30px;
}
.item_important a{

  color: #ffffff !important;
}
.item_important {
  width: calc(100% - 150px) !important;
  height: 100%;
  background-color: #442f1a !important;
}
.shop_index_box_content_item_img_btns_item {
  width: 150px;
  height: 100%;
  border-radius: 30px;
  color: #442f1a;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
}
.shop_index_box_content_item_img_box img{
  width: 150px;
  height: 150px;
  position: relative;
  top: 5px;
  left: 5px;
}
.shop_index_box_content_item_img_box {
  width:160px;
  height: 160px;
}
.shop_index_box_content_item_img {
  width: 100%;
  height: calc(100% - 100px);
  display: flex;
  flex-wrap: nowrap;
}

.shop_index_box_content_item_img_btns {
  height: 40px;
  width: calc(100% - 200px);
  position: relative;
  top: 80px;
  margin-left: 20px;
  border-radius: 30px;
  border: 2px solid #442f1a;
  display: flex;
  flex-wrap: nowrap;
}

.shop_index_box_content_item_mini_title span {
  width: calc(100% - 50px);
  padding-left: 50px;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  position: relative;
  top: 20px;
  display: block;
  font-weight: bold;
}

.shop_index_box_content_item_title span {
  width: calc(100% - 50px);
  padding-left: 50px;
  font-size: 30px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  position: relative;
  top: 43px;
  display: block;
}

.shop_index_box_content_item_title, .shop_index_box_content_item_mini_title {
  width: 100%;
  height: 50px;
}

.shop_index_box_content_item_name {
  width: 100%;
  height: 100px;
}

.shop_index_box_content_item {
  width: 495px;
  height: 260px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
}

.shop_index_box_content {
  width: 1000px;
  margin: 20px auto;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.shop_index_box_title {
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-weight: bold;
  font-size: 40px;
  text-align: center;
}

.shop_index_box {
  width: 1200px;
  margin: 20px auto;
  height: auto;
}

.shop_index_carousel img {
  width: 100%;
  height: 100%;
}

.shop_index_carousel {
  width: 100%;
  height: 700px;
}

.shop_index_nav_item a:hover {
  text-decoration: underline;
}

.shop_index_nav_item ul li:nth-child(1) a {
  color: #dadde2;
}

.shop_index_nav_item ul li:nth-child(1) {
  background-color: #ff4400;
}

.shop_index_nav_item a {
  color: #E4E7ED;
  font-size: 12px;
}

.shop_index_nav_item li {
  width: auto;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

.shop_index_nav_item ul {
  width: 1200px;
  height: 30px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.shop_index_nav_item {
  width: 100%;
  height: 30px;
  background-color: #000000;
}

.shop_index_nav_adv_item img {
  width: 100%;
  height: 100%;
}

.shop_index_nav_adv_item {
  width: 300px;
  height: 100%;
}

.shop_index_nav_adv {
  width: calc(100% - 300px);
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.shop_index_nav_logo img {
  width: 100%;
  height: 100%;
}

.shop_index_nav_logo {
  width: 300px;
  height: 100%;
}

.shop_index_nav {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}

.shop_index_nav_box {
  width: 100%;
  height: 100px;
  background-color: #ffffff;
}

.shop_index {
  width: 100%;
  height: auto;
  background-color: #f7f7f7;
}

</style>
